﻿Type.registerNamespace("RFBR.KnowledgeBase.Page");
RFBR.KnowledgeBase.Page = function (settings) {
    this._HierarchyContainer = null;
    this._DiagramContainer = null;
    this._DomNode = null;
    this._MainMenuContainer = null;
    settings.SizeChanged = { func: this._resize, context: this };
    this._HierarchyControl = null;
    this._CreateFrameButton = null;
    this._OpenSlotEditorButton = null;
    this._SlotsEditorPanel = null;
    this._ModifySlotPanel = null;
    this._UnsavedChanges = false;
    RFBR.KnowledgeBase.Page.initializeBase(this, arguments);
}

var knowledgeBaseProto = RFBR.KnowledgeBase.Page.prototype;

knowledgeBaseProto._getActions = function () {
    return {
        LoadFrames: "LoadFrames",
        CreateFrame: "CreateFrame",
        UpdateFrame: "UpdateFrame",
        GetSlots: "GetSlots",
        RenameKnowledgeBase: "RenameKnowledgeBase"
    };
};

knowledgeBaseProto._getEntityType = function () {
    return {
        Custom: "Custom",
        Variable: "Variable",
        Frame: "Frame"
    };
};

knowledgeBaseProto._init = function () {
    this._loadFrames(this._render);
    this._renderButtons();
};

knowledgeBaseProto._loadFrames = function (callback) {
    this._Waiter.show();
    $.ajax({
        url: this._ControllerPath + this._getActions().LoadFrames,
        type: "POST",
        success: function (KnowledgeBase) {
            if (callback) {
                callback.call(this, KnowledgeBase);
            }
        }.bind(this),
        complete: function () {
            this._Waiter.hide();
        }.bind(this)
    });
};

knowledgeBaseProto._render = function (kbase) {
    this._HierarchyControl = new RFBR.KnowledgeBase.Hierarchy({
        Parent: this._HierarchyContainer,
        ControllerPath: this._ControllerPath,
        Nodes: [{
            Name: kbase.Name,
            Childs: kbase.Nodes
        }],
        SelectionChanged: { func: this._onHierarchySelectionChanged, context: this },
        NodeEdited: { func: this._onHierarchyNodeEdited, context: this },
    });
    this._DiagramControl = new RFBR.KnowledgeBase.Diagram({
        Parent: this._DiagramContainer,
        ControllerPath: this._ControllerPath,
        Nodes: kbase.Nodes,
        SelectionChanged: { func: this._onDiagramSelectionChanged, context: this },
        NodeEdited: { func: this._onDiagramNodeEdited, context: this },
    });
    this._OpenSlotEditorButton = this._createBlock("div", "slot-editor-button-open", null, "Открыть редактор слотов");
    this._OpenSlotEditorButton.onclick = this._onOpenSlotEditorButton.bind(this);
    $(this._OpenSlotEditorButton).appendTo(this._PortalContainer);

    this._SlotsEditorPanel = this._createBlock("div", "slot-editor-panel background-gradient");
    $(this._SlotsEditorPanel).appendTo(this._PortalContainer);
    this._SlotsEditorContentPanel = this._createBlock("div", "slot-editor-panel-content");
    this._SlotsEditorContentPanel.width = 260;
    $(this._SlotsEditorContentPanel).appendTo(this._SlotsEditorPanel);

    this._SaveFrameButton = this._createBlock("input");
    this._SaveFrameButton.type = "button";
    this._SaveFrameButton.value = "Save";
    this._SaveFrameButton.disabled = true;
    $(this._SaveFrameButton).css("margin-left", "45px");
    this._SaveFrameButton.onclick = this._saveFrameButtonClick.bind(this);
    $(this._SaveFrameButton).appendTo(this._SlotsEditorPanel);

    this._AddSlotButton = this._createBlock("input");
    this._AddSlotButton.type = "button";
    this._AddSlotButton.value = "Add new slot";
    this._AddSlotButton.onclick = this._addSlotButtonClick.bind(this);
    $(this._AddSlotButton).appendTo(this._SlotsEditorPanel);

    this._CloseFrameButton = this._createBlock("input");
    this._CloseFrameButton.type = "button";
    this._CloseFrameButton.value = "Close";
    this._CloseFrameButton.onclick = this._closeFrameButtonClick.bind(this);
    $(this._CloseFrameButton).appendTo(this._SlotsEditorPanel);

    this._ModifySlotPanel = this._createBlock("div", "modify-slot-panel background-gradient");
    $(this._ModifySlotPanel).appendTo(this._PortalContainer);
    this._ModifySlotContentPanel = this._createBlock("div", "modify-slot-panel-content");
    this._ModifySlotContentPanel.width = 260;
    $(this._ModifySlotContentPanel).appendTo(this._ModifySlotPanel);

    this._SaveSlotButton = this._createBlock("input");
    this._SaveSlotButton.type = "button";
    this._SaveSlotButton.value = "Save";
    $(this._SaveSlotButton).css("margin-left", "100px")
    this._SaveSlotButton.onclick = this._saveSlotButtonClick.bind(this);
    $(this._SaveSlotButton).appendTo(this._ModifySlotPanel);

    this._CloseSlotEditorButton = this._createBlock("input");
    this._CloseSlotEditorButton.type = "button";
    this._CloseSlotEditorButton.value = "Close";
    this._CloseSlotEditorButton.onclick = this._closeSlotEditorButtonClick.bind(this);
    $(this._CloseSlotEditorButton).appendTo(this._ModifySlotPanel);

    this._renderModifySlotPanel();

    $(window).resize();
};

knowledgeBaseProto._renderModifySlotPanel = function () {
    var container = this._createBlock("div");
    $(this._createBlock("label", "slot-name-label", "Name")).appendTo(container);
    var name = this._createBlock("input", "textbox");
    name.type = "text";
    $(name).appendTo(container);

    $(this._createBlock("label", "slot-type-label", "Type")).appendTo(container);
    var type = this._createBlock("select", "SlotType");
    type.name = "slot-type";
    $(type).appendTo(container);
    var option = this._createBlock("option", null, this._getEntityType().Custom);
    option.value = this._getEntityType().Custom;
    $(option).appendTo(type);
    option = this._createBlock("option", null, this._getEntityType().Variable);
    option.value = this._getEntityType().Variable;
    $(option).appendTo(type);
    option = this._createBlock("option", null, this._getEntityType().Frame);
    option.value = this._getEntityType().Frame;
    $(option).appendTo(type);
    $(container).appendTo(this._ModifySlotContentPanel);
};

knowledgeBaseProto._saveFrameButtonClick = function (event) {
    this._UnsavedChanges = false;
    this._SaveFrameButton.disabled = true;
};

knowledgeBaseProto._addSlotButtonClick = function (event) {
    this._setModifySlotPanelVisible(true);
};

knowledgeBaseProto._closeFrameButtonClick = function (event) {
    this._setSlotEditorVisible(false);
};

knowledgeBaseProto._saveSlotButtonClick = function (event) {
    this._setModifySlotPanelVisible(false);
};

knowledgeBaseProto._closeSlotEditorButtonClick = function (event) {
    this._setModifySlotPanelVisible(false);
};

knowledgeBaseProto._onHierarchySelectionChanged = function (sender, args) {
    var node = args.node;
    var id = node.data.Id;
    this._setSlotEditorVisible(false);
    if (id) {
        $(this._OpenSlotEditorButton).show();
    }
    else {
        $(this._OpenSlotEditorButton).hide();
    }
};

knowledgeBaseProto._onDiagramSelectionChanged = function (sender, args) {

};

knowledgeBaseProto._onDiagramNodeEdited = function (sender, args) {

};

knowledgeBaseProto._onHierarchyNodeEdited = function (sender, args) {
    var node = args.node;
    node.tooltip = node.title;
    this._updateFrameInfo({
        Id: node.data.Id,
        Name: node.title,
        Parent: node.parent.data.Id
    });
};

knowledgeBaseProto._renderButtons = function () {
    this._CreateFrameButton = this._createBlock("div", "button create-frame", null, "Создать фрейм");
    this._CreateFrameButton.onclick = this._onCreateFrameButtonClick.bind(this);
    $(this._CreateFrameButton).appendTo(this._MainMenuContainer);
};

knowledgeBaseProto._onCreateFrameButtonClick = function (event) {
    var activeNode = this._HierarchyControl.getActiveNode();
    var id = activeNode ? activeNode.data.Id : null;
    this._Waiter.show();
    $.ajax({
        url: this._ControllerPath + this._getActions().CreateFrame,
        type: "POST",
        data: { p: id },
        success: function (frame) {
            this._onFrameCreated(frame);
        }.bind(this),
        complete: function () {
            this._Waiter.hide();
        }.bind(this)
    });
};

knowledgeBaseProto._updateFrameInfo = function (data) {
    this._Waiter.show();
    if (data.Id) {
        $.ajax({
            url: this._ControllerPath + this._getActions().UpdateFrame,
            type: "POST",
            data: data,
            complete: function () {
                this._Waiter.hide();
            }.bind(this)
        });
    }
    else {
    $.ajax({
        url: this._ControllerPath + this._getActions().RenameKnowledgeBase,
        type: "POST",
        data: { n: data.Name },
        complete: function () {
            this._Waiter.hide();
        }.bind(this)
    });
    }
};

knowledgeBaseProto._onFrameCreated = function (frame) {
    this._HierarchyControl.createNode(frame);
};

knowledgeBaseProto._resize = function (sender, args) {
    var height = $(this._DomNode).height();
    var width = $(this._DomNode).width();
    height -= $(this._MainMenuContainer).outerHeight(true);

    //hierarchy
    $(this._HierarchyContainer).height(height);
    this._HierarchyControl.setHeight(height);

    //slots editor
    $(this._SlotsEditorPanel).height(height);
    $(this._SlotsEditorContentPanel).height(height - 80);
    $(this._ModifySlotPanel).height(height);
    $(this._ModifySlotContentPanel).height(height - 80);

    //diagram
    width -= $(this._HierarchyContainer).outerWidth(true);
    $(this._DiagramContainer).height(height);
    $(this._DiagramContainer).width(width - 4);
    this._DiagramControl.setHeight(height);
    this._DiagramControl.setWidth(width - 4);
};

knowledgeBaseProto._onOpenSlotEditorButton = function (event) {
    var activeNode = this._HierarchyControl.getActiveNode();
    var id = activeNode ? activeNode.data.Id : null;
    if (!id) return;
    this._Waiter.show();
    $.ajax({
        url: this._ControllerPath + this._getActions().GetSlots,
        type: "POST",
        data: { f: id },
        success: function (slots) {
            this._openSlotEditor(slots, activeNode);
        }.bind(this),
        complete: function () {
            this._Waiter.hide();
        }.bind(this)
    });
};

knowledgeBaseProto._openSlotEditor = function (slots, frame) {
    if (slots) {
        $(this._SlotsEditorContentPanel).empty();
        this._setSlotEditorVisible(true, this._renderSlots.bind(this), { slots: slots, frame: frame });
    }
};

knowledgeBaseProto._renderSlots = function (args) {
    $(this._SlotsEditorContentPanel).empty();
    var slots = args.slots,
        frame = args.frame;
    slots = [{
        Type: "Custom",
        Name: "Name",
        Value: {
            Id: "name-of-frame",
            Value: frame.title
        }
    }].concat(slots);
    for (var i = 0; i < slots.length; i++) {
        this._renderSlot(slots[i]);
    }
};

knowledgeBaseProto._renderSlot = function (slot) {
    var container = this._createBlock("div", "Slot");
    $(this._createBlock("label", "SlotName", slot.Name)).appendTo(container);
    switch (slot.Type) {
        case this._getEntityType().Custom:
            var textbox = this._createBlock("input", "textbox");
            textbox.type = "text";
            textbox.setAttribute("entity-id", slot.Value.Id);
            textbox.value = slot.Value.Value;
            $(textbox).appendTo(container);
            break;
        case this._getEntityType().Variable:
            var combobox = this._createBlock("select", "combobox");
            combobox.name = slot.Value.Id;
            combobox.setAttribute("entity-id", slot.Value.Id);
            var domain = slot.Value.Domain;
            for (var i = 0; i < domain.length; i++) {
                var item = this._createBlock("option", null, slot.Value.Domain[i]);
                item.value = slot.Value.Domain[i];
                if (slot.Value.Value == slot.Value.Domain[i]) {
                    item.selected = "selected";
                }
                $(item).appendTo(combobox);
            }
            $(combobox).appendTo(container);
            break;
        case this._getEntityType().Frame:
            break;
    }
    $(container).appendTo(this._SlotsEditorContentPanel);
};

knowledgeBaseProto._setSlotEditorVisible = function (value, callback, args) {
    if (value != false) {
        $(this._OpenSlotEditorButton).hide();
        $(this._SlotsEditorPanel).show(300, function () {
            if (callback) {
                callback.call(this, args);
            }
        }.bind(this));
    }
    else {
        this._SaveFrameButton.disabled = !this._UnsavedChanges;
        this._AddSlotButton.disabled = false;
        this._CloseFrameButton.disabled = false;
        $(this._ModifySlotPanel).hide(100, function () {
            $(this._SlotsEditorPanel).hide(200, function () {
                $(this._OpenSlotEditorButton).show();
            }.bind(this));
        }.bind(this));
    }
};

knowledgeBaseProto._setModifySlotPanelVisible = function (value) {
    if (value != false) {
        $(this._ModifySlotPanel).show(300);
        this._SaveFrameButton.disabled = true;
        this._AddSlotButton.disabled = true;
        this._CloseFrameButton.disabled = true;
    }
    else {
        $(this._ModifySlotPanel).hide(300);
        this._SaveFrameButton.disabled = !this._UnsavedChanges;
        this._AddSlotButton.disabled = false;
        this._CloseFrameButton.disabled = false;
    }
};

knowledgeBaseProto = null;

RFBR.KnowledgeBase.Page.registerClass("RFBR.KnowledgeBase.Page", RFBR.BaseComponent);